<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">			
			img{
				width: 50px;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<div class="panel panel-primary text-center">
				<div class="panel-heading">购物车</div>
					<table class="table table-bordered table-striped" >						
						<tr>
							<td>序号</td>
							<td>
								<!--<button type="button" class="btn btn-danger"  @click="qx()">全选</button>
								<button type="button" class="btn btn-primary"	@click="fx()">反选</button>-->
								全选:<input type="checkbox" @click="qx()" v-model="checkall" />
							</td>
							<td>详图</td>
							<td>名称</td>
							<td>单价</td>
							<td>数量</td>
							<td>小计</td>
							<td>操作</td>
						</tr>
						<tr v-for="(i,index) in info">
							<td>{{i.xh}}</td>
							<td><input type="checkbox" v-model="i.check" @click="ischeck()" /></td>
							<td><img v-bind:src="i.img"></span></td>
							<td>{{i.name}}</td>
							<td>￥{{i.price}}</td>
							<td>
								<input type="button" value="-" class="inp1" v-on:click="jian(i)" />
								<input type="text" :value="i.num" class="inp2" />
								<input type="button" value="+" class="inp1" v-on:click="jia(i)" />
							</td>
							<td>￥{{i.price*i.num}}</td>
							<td><button type="button" class="btn btn-warning" v-on:click="sc(index)" >删除</button></td>							
							<td></td>
						</tr>
					</table>
				</div>
			<footer>
				<li>
					<p>合计:<span>{{price}}</span></p>
					<p>总计:<span>{{count}}</span></p>
				</li>
				<li>
					<button type="button" class="btn btn-danger" v-on:click="qk()">全部删除</button>
				</li>
			</footer>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var data = {
			info: [{
					xh: "1",
					name: "oppo",
					price: 199.00,
					num: 1,
					count: "0",
					check: false,
					img:"img/1.jpg",
				},
				{
					xh: "2",
					name: "vivo",
					price: 268.00,
					num: 1,
					count: "0",
					check: false,
					img:"img/1.jpg",
				},
				{
					xh: "3",
					name: "iphone",
					price: 168.00,
					num: 1,
					count: "0",
					check: false,
					img:"img/1.jpg",
				},
				{
					xh: "4",
					name: "acer",
					price: 248.00,
					num: 1,
					count: "0",
					check: false,
					img:"img/1.jpg",
				},
				{
					xh: "5",
					name: "lenovo",
					price: 321.00,
					num: 1,
					count: "0",
					check: false,
					img:"img/1.jpg",
				}
			],
			checkall: false
		}
		new Vue({
			el: "#box",
			data: data,
			methods: {
				//加按钮
				jia: function(index) {  
					index.num++;
				},
				//减按钮
				jian: function(index) {
					index.num--;
					if(index.num <= 1) {
						index.num = 1
					}
				},
				//删除按钮
				sc: function(index) {
					this.info.splice(index, 1)
				},
				//清空按钮
				qk: function() {
					this.info = []; 
				},
				//全选按钮
				qx: function() {
					if(this.checkall) {
						this.info.forEach(function(item) {
							return item.check = true;
						})
					} else {
						this.info.forEach(function(item) {
							return item.check = false;
						})
					}
				},
				//反选按钮
				ischeck: function() {
					//数组的某一项都为true，它为true
					var check = this.info.every(function(item) {
						return item.check == true;
					})
					console.log(check);   
					if(check) {
						this.checkall = true;
					} else {
						this.checkall = false;
					}
				}
			},
			//实时计算
			computed: {
				//合计
				price: function(){
					//给它一个初始变量为0
					var price = 0;
					//相当于foreach，遍历数组用的 
					this.info.map(function(item) {
						if(item.check) {
							price += item.num * item.price
						}
					})
					return price;
				},
				//总计
				count: function(){
					//给它一个初始变量为0
					var a = 0;
					//当它点击每一项是 如果为选中状态时 让它的初始变量发生   ++
					this.info.map(function(item) {
						if(item.check) {
							a++;
						}
					})
					return a;
				}
			}
		})
	</script>

</html>